<template>
  <div
    id="my-content-menu"
    class="actions-box bg-white"
    v-show="contextMenuState.visible"
    :style="{
      top: contextMenuState.y + 'px',
      left: contextMenuState.x + 'px',
    }"
  >
    <div class="custom-button">置顶</div>
    <div class="custom-button">标记未读</div>
    <div class="custom-button">消息免打扰</div>
    <n-divider style="margin: 0;" />
    <div class="custom-button">独立窗口显示</div>
    <div class="custom-button">不显示</div>
    <n-divider style="margin: 0;" />
    <div class="custom-button danger-button">删除</div>
  </div>
</template>

<script setup>
import { contextMenuState, hideContextMenu } from "@/utils/eventBus/contextMenu.js";

import { onMounted, onUnmounted } from 'vue';

// 检查点击是否在菜单外部，如果在菜单外部，则自动隐藏
const handleClickOutside = (event) => {
  const menuElement = document.querySelector('#my-content-menu');
  if (menuElement && !menuElement.contains(event.target)) {
    hideContextMenu();
  }
};

// 组件挂载时添加事件监听
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

</script>

<style lang="scss" scoped>
.actions-box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 12px 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 99;
}

.custom-button {
  line-height: 22px;
}

.danger-button {
  color: #f96464;
  &:hover {
    background-color: #ed4c4c;
    color: white;
  }
}
</style>
